<template>
    <button class="yun-button">
        <slot></slot>
    </button>
</template>

<style lang="scss" scoped>
    button.yun-button {
        padding: 4px 12px;
        border-radius: 999px;
        border: 1px solid #666;
        outline: none;
        background-color: transparent;
        transform: translateY(-2px);
        transition: all .1s ease-in-out;
        cursor: pointer;

        &:hover {
            background-color: #eee;
        }

        &:active {
            transform: translate(1px, 0px);
        }
    }
</style>